<script setup lang="ts">
import { useAddTag, useDelTag, useTagList } from "@fl/api/xf-api/comment-manage";
import { useMessage } from "@fl/hooks/web/use-message";
import { cloneDeep } from "lodash-es";
import { PlusDialog } from "plus-pro-components";
const { createConfirmModal, createMessage } = useMessage();
const emits = defineEmits(["update:show"]);
const show = defineModel("show");
const { data, isLoading } = useTagList(show, {});
const records = ref();
const current = ref({});
defineExpose({ close });
watchEffect(() => {
  if (data.value) {
    records.value =data.value.length>0? cloneDeep(data.value):[{
      name: "",
    }];
  }
});
const { mutate: addMutate } = useAddTag();
const { mutate: delMuTate } = useDelTag();
const item = ref({
  name: "",
});
const arr = computed(() => records.value);
function close() {
  show.value = false;
}
function add() {
  if(records.value[records.value.length - 1].name===""){
    ElMessage.error("请输入标签名称");
    return;
  }
  arr.value.push(item.value);
}
function focus(v) {
  current.value = cloneDeep(v) ;
}
function save(i) {
  // 新增
  if (!current.value.id) {
    if (i.name === "") {
      return;
    }
    addMutate(i, {
      onSuccess: () => {
        ElMessage.success("操作成功");
        item.value = {
          name: "",
        };
      },
      onError: () => {
        arr.value.pop();
        item.value = {
          name: "",
        };
      },
    });
  } else { //编辑
    if (i.name === current.value.name) {
      return;
    }
    if(i.name === ""){
      ElMessage.error("请输入标签名称");
    return;
    }
    addMutate(i, {
      onSuccess: () => {
        ElMessage.success("操作成功");
        current.value = {};
      },
      onError: () => {},
    });
  }
}
function del(v, i) {
  if (!v.id) {
    records.value.splice(i, 1);
    return;
  }
  createConfirmModal({
    content: `是否确认删除“${v.name}”这条标签？`,
    onError: () => {
      console.log("操作取消！");
    },
    onSuccess: () => {
      delMuTate([v.id], {
        onSuccess: () => {
          ElMessage.success("操作成功");
        },
      });
    },
  });
}
</script>

<template>
  <PlusDialog v-model="show" title="标签管理" width="50%" :has-footer="false">
    <div
      class="flex gap-12 flex-col items-center max-h-500 overflow-y-scroll dialog-scroll"
    >
      <div v-for="(item, index) in arr" class="w-473 flex items-center gap-12">
        <el-input
          class="center-input"
          v-model="item.name"
          @focus="focus(item)"
          @blur="save(item)"
        ></el-input>
        <div class="operate flex gap-12">
          <el-icon size="24" v-if="index === arr.length - 1" color="red" @click="add"
            ><CirclePlusFilled
          /></el-icon>
          <el-icon size="24" v-if="arr.length>1||item.id" @click="del(item, index)"><SemiSelect /></el-icon>
        </div>
      </div>
    </div>
    <!-- <template #footer>
      <div class="mx-auto">
        <el-button @click="close" size="large"> 取消 </el-button>

        <SubmitBtn type="primary" @click="close"> 确认 </SubmitBtn>
      </div>
    </template> -->
  </PlusDialog>
</template>

<style lang="scss" scoped>
:deep(.center-input .el-input__inner) {
  text-align: center;
}
.center-input {
  width: 400px;
}
.dialog-scroll {
  &::-webkit-scrollbar {
    width: 4px;
}

/* 自定义滚动条的滑块（thumb） */
&::-webkit-scrollbar-thumb {
    background: #dcdfe6;
    border-radius: 2px;
}

}
</style>
